<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Waterwheel Carousel Demonstration Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/demo.css'}" />
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/waterwheel-carousel.css'}" />
         <script type="text/javascript" src="@{'/public/javascripts/jquery-1.7.min.js'}"></script>
    <script type="text/javascript" src="@{'/public/javascripts/jquery.waterwheelCarousel.min.js'}"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#waterwheel-carousel-default").waterwheelCarousel();
        
        $("#waterwheel-carousel-higharch").waterwheelCarousel({
            startingWaveSeparation: -90,
            waveSeparationFactor: .7,
            centerOffset: 10,
            startingItemSeparation: 120,
            itemSeparationFactor: .9,
            itemDecreaseFactor: .75
        });
        
        $("#waterwheel-carousel-horizon").waterwheelCarousel({
            startingWaveSeparation: 0,
            centerOffset: 30,
            startingItemSeparation: 150,
            itemSeparationFactor: .7,
            itemDecreaseFactor: .75,
            opacityDecreaseFactor: 1,
            autoPlay: 1500
        });
        
        $("#waterwheel-carousel-flat").waterwheelCarousel({
            itemSeparationFactor: 1,
            itemDecreaseFactor: 1,
            waveSeparationFactor: 1,
            startingWaveSeparation: 0,
            startingItemSeparation: 280,
            centerOffset: 10,
            opacityDecreaseFactor: .3,
            autoPlay: 3000,
            edgeReaction: 'reverse'
        });
        
        $("#waterwheel-carousel-vertical").waterwheelCarousel({
            orientation: 'vertical',
            startingItemSeparation: 100,
            startingWaveSeparation: 40,
            autoPlay: 2000
        });

      });
    </script>
  </head>
  <body>
    <div class="example-desc">
      Default demonstration - no options overriden.
    </div>
    <!-- BEGIN COPYING HERE -->
    <div id="waterwheel-carousel-default">
      <div class="carousel-controls">
      	<div class="carousel-prev"><a href="#">&lt; previous</a></div>
      	<div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">
        <img src="images/testImage1.png" alt="Test Image 1" />
        <img src="images/testImage2.png" alt="Test Image 2" />
        <img src="images/testImage3.png" alt="Test Image 3" />
        <img src="images/testImage4.png" alt="Test Image 4" />
        <img src="images/testImage5.png" alt="Test Image 5" />
        <img src="images/testImage6.png" alt="Test Image 6" />
        <img src="images/testImage7.png" alt="Test Image 7" />
        <img src="images/testImage8.png" alt="Test Image 8" />
        <img src="images/testImage9.png" alt="Test Image 9" />
        <img src="images/testImage10.png" alt="Test Image 10" />
        <img src="images/testImage11.png" alt="Test Image 11" />
      </div>
    </div>
    <!-- END COPYING HERE -->
    
    <br />
    
    <div class="example-desc">
      High arch effect
    </div>
    <!-- BEGIN COPYING HERE -->
    <div id="waterwheel-carousel-higharch">
      <div class="carousel-controls">
      	<div class="carousel-prev"><a href="#">&lt; previous</a></div>
      	<div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">
        <img src="images/testImage1.png" alt="Test Image 1" />
        <img src="images/testImage2.png" alt="Test Image 2" />
        <img src="images/testImage3.png" alt="Test Image 3" />
        <img src="images/testImage4.png" alt="Test Image 4" />
        <img src="images/testImage5.png" alt="Test Image 5" />
        <img src="images/testImage6.png" alt="Test Image 6" />
        <img src="images/testImage7.png" alt="Test Image 7" />
        <img src="images/testImage8.png" alt="Test Image 8" />
        <img src="images/testImage9.png" alt="Test Image 9" />
        <img src="images/testImage10.png" alt="Test Image 10" />
        <img src="images/testImage11.png" alt="Test Image 11" />
      </div>
    </div>
    <!-- END COPYING HERE -->
    
    <br />
    
    <div class="example-desc">
      Items kept on horizontal plane, opacity turned off, autoplay on
    </div>
    <!-- BEGIN COPYING HERE -->
    <div id="waterwheel-carousel-horizon">
      <div class="carousel-controls">
      	<div class="carousel-prev"><a href="#">&lt; previous</a></div>
      	<div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">
        <img src="images/testImage1.png" alt="Test Image 1" />
        <img src="images/testImage2.png" alt="Test Image 2" />
        <img src="images/testImage3.png" alt="Test Image 3" />
        <img src="images/testImage4.png" alt="Test Image 4" />
        <img src="images/testImage5.png" alt="Test Image 5" />
        <img src="images/testImage6.png" alt="Test Image 6" />
        <img src="images/testImage7.png" alt="Test Image 7" />
        <img src="images/testImage8.png" alt="Test Image 8" />
        <img src="images/testImage9.png" alt="Test Image 9" />
        <img src="images/testImage10.png" alt="Test Image 10" />
        <img src="images/testImage11.png" alt="Test Image 11" />
      </div>
    </div>
    <!-- END COPYING HERE -->
    
    <br />
    
    <div class="example-desc">
      Completely flat, no 3d effect, slow autoplay with reverse instead of reset edge reaction
    </div>
    <!-- BEGIN COPYING HERE -->
    <div id="waterwheel-carousel-flat">
      <div class="carousel-controls">
      	<div class="carousel-prev"><a href="#">&lt; previous</a></div>
      	<div class="carousel-next"><a href="#">&gt; next</a></div>
      </div>
      <div class="carousel-images">
        <img src="images/testImage1.png" alt="Test Image 1" />
        <img src="images/testImage2.png" alt="Test Image 2" />
        <img src="images/testImage3.png" alt="Test Image 3" />
        <img src="images/testImage4.png" alt="Test Image 4" />
        <img src="images/testImage5.png" alt="Test Image 5" />
        <img src="images/testImage6.png" alt="Test Image 6" />
        <img src="images/testImage7.png" alt="Test Image 7" />
        <img src="images/testImage8.png" alt="Test Image 8" />
        <img src="images/testImage9.png" alt="Test Image 9" />
        <img src="images/testImage10.png" alt="Test Image 10" />
        <img src="images/testImage11.png" alt="Test Image 11" />
      </div>
    </div>
    <!-- END COPYING HERE -->
    
    <br />
    
    <div class="example-desc">
      Waterfall effect (vertical orientation), autoplay turned on
    </div>
    <!-- BEGIN COPYING HERE -->
    <div id="waterwheel-carousel-vertical">
      <div class="carousel-controls">
      	<div class="carousel-prev"><a href="#">&lt; move down</a></div>
      	<div class="carousel-next"><a href="#">&gt; move up</a></div>
      </div>
      <div class="carousel-images">
        <img src="images/testImage1.png" alt="Test Image 1" />
        <img src="images/testImage2.png" alt="Test Image 2" />
        <img src="images/testImage3.png" alt="Test Image 3" />
        <img src="images/testImage4.png" alt="Test Image 4" />
        <img src="images/testImage5.png" alt="Test Image 5" />
        <img src="images/testImage6.png" alt="Test Image 6" />
        <img src="images/testImage7.png" alt="Test Image 7" />
        <img src="images/testImage8.png" alt="Test Image 8" />
        <img src="images/testImage9.png" alt="Test Image 9" />
        <img src="images/testImage10.png" alt="Test Image 10" />
        <img src="images/testImage11.png" alt="Test Image 11" />
      </div>
    </div>
    <!-- END COPYING HERE -->
  </body>
</html>

